import React, { useState } from "react";
import { Card, Row, Col, Flex, Divider } from "antd";
import { ProFormRadio } from "@ant-design/pro-components";
import styled from "styled-components";
import { CustomSubTitle } from "@/components/customTitle";
import { ParkData } from "../type";
import useParkStore from "@/store/parkStore";

interface CardSelectionProps {
  // onSelect: (selectedId: string) => void; // 外层传递选中的卡片 ID 的回调
  parkData: ParkData[];
}

const StyledProFormRadio = styled(ProFormRadio)`
  &.ant-radio-checked .ant-radio-inner {
    border-color: #1677ff !important; /* 自定义边框颜色 */
    background-color: #1677ff !important; /* 自定义背景颜色 */
  }
`;

const StyledVehiclePrice = styled("div")`
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #696767;
`;

const RadioCarPark: React.FC<CardSelectionProps> = ({ parkData }) => {
  const { setParkId, setPrice, setDpppPrice, setParkList } = useParkStore();
  // 状态来保存选中的卡片 ID
  const [selectedId, setSelectedId] = useState<string | null | undefined>(null);

  const handleCardClick = (card: ParkData) => {
    console.log(card, "card");
    setSelectedId(card.tariffId); // 更新选中的卡片 ID
    setParkId(card.parkId || "");
    setParkList(card);
    setPrice(card.price || "0");
    setDpppPrice(card.dpppPrice || "0");
    // onSelect(card.tariffId); // 通知外层组件选中的卡片 ID
  };
  console.log(parkData, "parkData");
  return (
    <>
      <CustomSubTitle>Choose Car Park</CustomSubTitle>
      <Row gutter={16}>
        {Array.isArray(parkData) &&
          parkData.length > 0 &&
          parkData?.map((card) => (
            <Col span={8} key={card.tariffId}>
              <Card
                title=""
                hoverable
                style={{
                  // cursor: "pointer",
                  backgroundColor:
                    selectedId === card.tariffId ? "#F7F5F1" : "", // 选中时改变背景色
                  // boxShadow:
                  //   selectedId === card.id ? "0 4px 8px rgba(0,0,0,0.2)" : "none", // 选中时添加阴影
                  border:
                    selectedId === card.tariffId
                      ? "1px solid #7A6145"
                      : "1px solid #E1E1E1", // 选中时改变边框
                }}
                onClick={() => handleCardClick(card)} // 点击卡片时更新选中的 ID
              >
                <Flex align="center">
                  <StyledProFormRadio
                    name="selectedOption"
                    fieldProps={{
                      value: card.tariffId,
                      checked: selectedId === card.tariffId, // 根据选中的 ID 设置 Radio 是否选中
                      // onChange: () => handleCardClick(card), // 点击 Radio 时更新选中的 ID
                    }}
                    style={{
                      display: "none",
                    }} // 隐藏实际的 Radio 选项
                  />
                  <div>
                    <StyledVehiclePrice>{card.englishName}</StyledVehiclePrice>
                    <div>HK${card.price}</div>
                  </div>
                </Flex>
              </Card>
            </Col>
          ))}
      </Row>
      <Divider plain></Divider>
    </>
  );
};

export default RadioCarPark;
